<template>
    <div>{{fullName}}</div>
    <button @click="fullName += '~'">修改名称</button>
</template>
<script>
import { ref, defineComponent, reactive, computed, watch, watchEffect } from 'vue'
export default defineComponent({
    name: 'Setup',
    components: { },
    setup () {
        // computed
        const name = reactive({
            firstName: '牛',
            lastName: '文俐'
        })
        // 简写 没有考虑计算属性被修改的情况
        // const fullName = computed(() => {
        //     return name.firstName + name.lastName
        // })
        const fullName = computed({
            get () {
                return name.firstName + name.lastName
            },
            set (val) {
                console.log(val)
            }
        })
        return {
            fullName
        }
    }
})
</script>
<style lang="">
    
</style>